<template>
  <!-- 大区 -->
  <div id="firm">
    <crumbsbar :crumbs="crumbsInfo" @handlerSearch="handlerSearch" :search_word="select_word">
      <div class="tag-select">
        <!--<el-tag class="font-c t-a-c"-->
          <!--closable-->
          <!--v-for="(item,index) in tagsData"-->
          <!--@close="handleCloseTag(index)">-->
          <!--<i class="el-icon-check mr10"></i>-->
          <!--<span class="text-filter text-cfg">{{item.pname}}</span>-->
        <!--</el-tag>-->
      </div>
    </crumbsbar>

    <div class="container">
      <div class="table-box">
        <!-- 大区 -->
        <div class="table-1">
          <div class="table-box-add" :class="{'table-box-add-active':!is_add}">
            <div class="table-box-add-btn" v-if="is_add" @click="handlerAddFirm">+添加大区</div>
            <div class="table-box-add-info" v-if="!is_add">
              <el-row>
                <el-col :span="20">
                  <el-form :model="addForm" :rules="rules" ref="addForm">
                    <el-row>
                      <el-col :span="6" :offset="6">
                        <el-form-item prop="name">
                          <el-input
                            class="input-add"
                            maxlength="20"
                            v-model.trim="addForm.name"
                            placeholder="新的大区名称(必填)"
                          ></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="6" :offset="6">
                        <el-form-item prop="sort">
                          <el-input
                            class="input-add"
                            maxlength="6"
                            v-model.trim="addForm.sort"
                            placeholder="排序"
                          ></el-input>
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </el-form>
                </el-col>
                <el-col :span="4">
                  <el-button
                    size="small"
                    class="font-c"
                    style="border:1px solid #7D72E4"
                    @click="submitForm('addForm')"
                  >保存</el-button>
                  <el-button
                    size="small"
                    class="font-c"
                    style="border:1px solid #7D72E4"
                    @click="is_add=true"
                  >取消</el-button>
                </el-col>
              </el-row>
            </div>
          </div>
          <el-table :data="tableData" border class="table" ref="multipleTable" stripe>
            <el-table-column prop="id" label="ID" align="center" width="200px"></el-table-column>
            <el-table-column prop="sort" label="排序" align="center"></el-table-column>
            <el-table-column prop="name" label="大区名称" align="center"></el-table-column>
            <el-table-column label="操作" width="300" align="center">
              <template slot-scope="scope">
                <el-button
                  style="border:1px solid #7D72E4"
                  class="font-c"
                  size="small"
                  @click="addPro(scope.$index, scope.row)"
                >增加大区</el-button>
                <el-button
                  style="border:1px solid #7D72E4"
                  class="font-c"
                  size="small"
                  @click="updatePro(scope.$index, scope.row)"
                >编辑</el-button>
                <el-button
                  style="border:1px solid #7D72E4"
                  class="font-c"
                  size="small"
                  @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>

      <!-- 分页 -->
      <page
        class="page"
        :orderList="tableData"
        :totalCount="totalCount"
        :limit="limit"
        :page="page"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      ></page>
    </div>
    <!-- 编辑 -->
    <el-dialog title="编辑大区" :visible.sync="editVisible" width="400px" center>
      <div class="edit-form">
        <el-form :model="editForm" :rules="editFormRules" ref="editForm">
          <el-form-item prop="name" label="大区名称">
            <el-input
              class="input-add"
              maxlength="20"
              v-model.trim="editForm.name"
              placeholder="大区名称(必填)"
            ></el-input>
          </el-form-item>
          <el-form-item prop="sort" label="排序">
            <el-input
              class="input-add"
              maxlength="6"
              v-model.trim="editForm.sort"
              placeholder="排序"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="font-c" size="small" @click="editRow('editForm')">确 定</el-button>
        <el-button class="font-c" size="small" @click="editVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "firm",
  data() {
    return {
      crumbsInfo: {
        name: "大区",
        span:[7,0],
        placeholder: "检索大区名称"
      },
      pid:'',
      pname:'',
      tagsData:[],
      is_add: true,
      picShow: false,
      picInfo: "",
      totalCount: 100,
      limit: 10,
      page: 1,
      editVisible: false,
      tableData: [],
      ftpUrl:this.$ftpUrl,
      tableData1: [],
      tableData2: [],
      tableData3: [],
      select_word: "",
      idx: -1,
      // 添加的标签
      tags: [],
      addForm: {
        //添加大区form
        name: "",
        sort:1000
      },
      rules: {
        //添加大区form规则
        name: [
          { required: true, message: "请输入大区名称", trigger: "change" },
          {
            pattern: /^[\u4E00-\u9FA5A-Za-z0-9]+$/,
            message: "不能用特殊符号",
            trigger: "change"
          }
        ]
      },
      editForm: {
        //编辑
        id: "",
        name: "",
        sort: 1000
      },
      editFormRules: {
        //编辑
        name: [
          { required: true, message: "请输入名称", trigger: "change" },
          {
            pattern: /^[\u4E00-\u9FA5A-Za-z0-9]+$/,
            message: "不能用特殊符号",
            trigger: "change"
          }
        ],
        sort: [
          { required: true, message: "请输入排序", trigger: "change" },
          {
            pattern: /^([1-9][0-9]*)$/,
            message: "非零开头的数字",
            trigger: "change"
          }
        ]
      }
    };
  },
  created() {
    let query = this.$route.query.tagsData;
    this.tagsData = JSON.parse(query);
    this.pid = this.tagsData[1].pid;
    this.pname = this.tagsData[1].pname;
    this.getData();
  },
  computed: {},
  methods: {
    handlerSearch(v) {
      this.select_word = v;
      this.page = 1;
      this.getData();
    },

    // 获取数据
    getData() {
      let config ={
          page:(this.page-0),
          limit:(this.limit-0),
          pid:this.pid,
          type:2,
          name:this.select_word
      }
      this.$postFetch(this.$api.firmGameList,config).then(response => {
          let res = response.data;
          if (res.code != 1) {
            this.$message.error(res.msg);
            return;
          }
          this.tableData = res.data.rows;
          this.totalCount = res.data.totalCount;
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 添加大区,大区,区服
    handlerAddFirm() {
      this.select_word = "";
      this.is_add = false;
      Object.keys(this.addForm).forEach(key => {
        //清空输入框
        this.addForm[key] = "";
      });
      this.addForm.sort=1000
    },
    //提交添加大区
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.editVisible = false;
          this.is_add = true;
          let data = {
            name:this.addForm.name,
            pid:this.pid,
            type:2,
            status:1,
            sort:this.addForm.sort||1000
          }
          this.$postFetch(this.$api.addGame,data).then(response=>{
            let res = response.data;
            if(res.code!=1){
              this.$message.error(res.msg);
              return;
            }
            this.$message.success('添加成功');
            this.page=1;
            this.select_word=''
            this.getData();
          })
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //操作-添加大区
    addPro(index, row) {
      let id = row.id;
      let tags = this.tagsData;
      tags.push({pid:id,pname:row.name})
      console.log(JSON.stringify(tags));
      this.$router.push({path:'server',query:{tagsData:JSON.stringify(tags)}})
    },
    // 关闭当前菜单
    handleCloseTag(v){
      switch (v) {
        case 0:
              this.$router.push({path:'firm'})
          break;
        case 1:
              this.$router.push({path:'game',query:{pid:this.tagsData[0].pid,pname:this.tagsData[0].pname}})
          break;

        default:
          break;
      }

    },
    // 操作-编辑
    updatePro(i, r) {
      console.log(r);
      this.idx = i;
      this.editVisible = true;
      this.editForm.name = r.name;
      this.editForm.id = r.id;
      this.is_add=true;
    },
    // 提交编辑
    editRow(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let data = {
            id:this.editForm.id,
            name:this.editForm.name,
            pid:this.pid,
            type:3,
            status:1,
            sort:this.editForm.sort||1000
          }
          this.$postFetch(this.$api.updateGame,data).then(response=>{
            let res = response.data;
            if(res.code!=1){
              this.$message.error(res.msg);
              return;
            }
            this.$message.success('编辑成功！');
            this.editVisible = false;
            this.page=1;
            this.select_word='';
            this.getData();
          })
        }
      });
    },

    //操作--删除
    handleDelete(index, row) {
      let options = {
        title:'删除大区',
        content:`<div>是否确认 ${row.name}?</div><div style="margin-top:10px;"><div>确认删除后,对应区服同步删除!</div>`
      }
      this.$myconfirm('删除大区',options).then(()=>{
        this.deleteRow(row.id)
      })
    },
    // 确定删除
    deleteRow(id) {
      let data = {id:id};
      this.$postFetch(this.$api.delGame,data).then(response=>{
        let res = response.data;
        if(res.code!=1){
          this.$message.error(res.msg);
          return;
        }
        this.$message.success('删除成功！')
        this.page=1;
        this.select_word='';
        this.getData();
      })
    },

    // 分页导航
    handleCurrentChange(val) {
      this.page = val;
      this.getData();
    },
    // 每页条数切换
    handleSizeChange(v) {
      this.limit = v;
      this.getData();
    }
  },
};
</script>
<style lang="less" scoped>
#firm {
  .el-breadcrumb {
    font-size: 18px;
    float: left;
  }
  .upload-xml {
    float: right;
    margin-right: 10px;
  }
  .handle-box {
    margin-bottom: 20px;
  }

  .handle-select {
    width: 120px;
  }

  .handle-input {
    width: 300px;
    display: inline-block;
  }
  .del-dialog-cnt {
    font-size: 16px;
    text-align: center;
  }
  .table {
    width: 100%;
    font-size: 14px;
  }
  // 价格标签
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
  .tag-select {
    text-align: left;
    margin-bottom: 20px;
  }

  .avatar {
    width: 50px;
    height: 50px;
    margin-right: 10px;
    border: 1px solid #7d72e4;
  }
  .el-tag {
    position: relative;
    margin-left: 10px;
    width: 130px;
    height: 36px;
    // line-height: 36px;
    border-radius: 36px;
    background: #fff;
    border: 1px solid #7d72e4;
    i {
      position: absolute;
      top: 10px;
      left: 15px;
    }
    .text-cfg {
      display: inline-block;
      width: 70px;
    }
  }
}
</style>
